<template>
  <div id="meta2d"></div>
</template>

<script lang="ts" setup>
import { getCurrentInstance,onMounted, onUnmounted } from 'vue';
import { storeToRefs } from 'pinia';
import { useCanvasStore } from '@/store/canvas';
import { flowPens, flowAnchors } from "@meta2d/flow-diagram";
import { activityDiagram, activityDiagramByCtx } from "@meta2d/activity-diagram";
import { classPens } from "@meta2d/class-diagram";
import { sequencePens, sequencePensbyCtx } from "@meta2d/sequence-diagram";
import { register as registerEcharts } from '@meta2d/chart-diagram';
import { formPens } from "@meta2d/form-diagram";
import { chartsPens } from '@meta2d/le5le-charts';
import { ftaPens, ftaPensbyCtx, ftaAnchors } from "@meta2d/fta-diagram";
import { Meta2d, Pen, register, registerAnchors, registerCanvasDraw } from '@meta2d/core';
import { useSelection } from '@/services/selections';

  let listProps = defineProps({
    jsonContent: { type: String, required: true}
  });

const { select } = useSelection();
const canvasStore = useCanvasStore();
const { meta2dDatas } = storeToRefs(canvasStore);

onMounted(() => {
  const meta2dOptions: any = {
    background: "transparent",
  };
  if (window.location.pathname.indexOf("preview") !== -1) {
    meta2dOptions["rule"] = false;
  } else {
    meta2dOptions["rule"] = true;
  }
  let meta2d = new Meta2d("meta2d", meta2dOptions);

  // 按需注册图形库，以下为自带基础图形库
  register(flowPens());
  registerAnchors(flowAnchors());
  register(activityDiagram());
  registerCanvasDraw(activityDiagramByCtx());
  register(classPens());
  register(sequencePens());
  registerCanvasDraw(sequencePensbyCtx());
  registerCanvasDraw(formPens());
  // registerCanvasDraw(chartsPens());
  register(ftaPens());
  registerCanvasDraw(ftaPensbyCtx());
  registerAnchors(ftaAnchors());


  // 读取本地存储
  //ToDO: 判断是否第一次弹窗打开，如果是展示列表中返回的json，如果不是展示用户操作的
  console.log('meta2dDatas.value', meta2dDatas.value);
  console.log('listProps.jsonContent', listProps.jsonContent);
  // let data: any = localStorage.getItem("meta2d");
  // if (data) {
  //   data = JSON.parse(data);
  //   // 判断是否为运行查看，是-设置为预览模式
  //   if (!data.locked) {
  //     data["locked"] = 0;
  //   }
  //   meta2d.open(data);
  // }
  if(listProps.jsonContent !== "{}") {
    let data: any = null;
    if(meta2dDatas.value === null) {
      data = JSON.parse(listProps.jsonContent);
    } else {
      data = meta2dDatas.value;
    }
    if (!data.locked) {
      data["locked"] = 0;
    }
    meta2d.open(data);
  }

  meta2d.on("active", active);
  meta2d.on("inactive", inactive);
});

function active(pens?: Pen[]) {
  select(pens);
}

function inactive() {
  select();
}

onUnmounted(() => {
  meta2d.destroy();
  // 取消订阅
  meta2d.off("active", active);
  meta2d.off("inactive", inactive);
  // 删除原始数据
  // removeOriginalData();
});

</script>
<style lang="scss" scoped>
#meta2d {
  position: relative;
  width: 100%;
  height: calc(100vh - 74px);
}
.context-menu {
  background-color: white;  
  border: 1px solid #ccc;
  padding: 10px;  
  z-index: 1000; /* 确保弹窗在最上层 */  
  background-clip: padding-box;
  border-radius: 2px;  
  outline: none;
  box-shadow: 0 2px 8px #00000026;
  ul {
    min-width: 200px;
    position: relative;
    margin: 0;
    padding: 4px 0;
    text-align: left;          
    list-style-type: none;
    background-color: #fff;
    -webkit-transform: translate3d(0, 0, 0);
    li {
      clear: both;
      margin: 0;
      padding: 5px 12px;
      color: #000000d9;
      font-weight: 400;
      font-size: 14px;
      line-height: 22px;
      white-space: nowrap;
      cursor: pointer;
      transition: all .3s;
    }
  }
}
</style>